<template >
    <page-view>
        <el-card>
            <template #header>
                <div class="flex flex-row justify-between">
                    <div class="font-bold">编辑菜品分类</div>
                    <el-link type="primary" @click="$router.back()">返回列表</el-link>
                </div>
            </template>

            <el-skeleton :rows="6" animated :loading="isLoading">
                <el-form :model="foodInfoData" label-width="120px" :rules="foodInfoDataRules" ref="formEl">
                    <el-form-item label="分类名称" prop="category_name">
                        <el-input placeholder="请输入分类名称" v-model="foodInfoData.category_name"></el-input>
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" @click="submitForm" :loading="isSumbiting" loading-icon="Loading">
                            保存数据
                        </el-button>
                        <el-button type="danger" @click="resetForm">重置表单</el-button>
                    </el-form-item>
                </el-form>
            </el-skeleton>
            <!-- 表单 -->


        </el-card>
    </page-view>
</template>
<script setup>
import { reactive, ref } from "vue";
import { PictureFilled, Loading } from "@element-plus/icons-vue";
import API from "@/utils/API/index.js";
import { onMounted, inject } from "vue";
import { ElNotification } from "element-plus";
import { mainStore } from "../../store/index"
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()


const store = mainStore();

const baseURL = inject("baseURL");


//表单上面的数据
const foodInfoData = ref({
    id: "",
    category_name: "",
});

//表单验证的规则
const foodInfoDataRules = {
    category_name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],

}

//根据id获取菜品信息
const isLoading = ref(false);
const findById = () => {
    isLoading.value = true;
    let id = route.params.id
    console.log(id);
    API.categoryInfo.findById(id).then(result => {
        foodInfoData.value = result
    }).catch(error => {

    }).finally(() => {
        isLoading.value = false;

    })
}
findById()



//提交表单   
const formEl = ref(null)
const submitForm = () => {

    //验证表单数据是否合格
    console.log(formEl.value);
    formEl.value.validate(valid => {
        //这个valid就是验证的结果
        // console.log(valid);
        if (valid) {

            //说明验证成功，我们要提交数据
            updateFoodInfo()
        } else {
            //验证失败
            ElNotification({
                type: "warning",
                title: "提示",
                message: "请正确填写表单内容"
            })
        }
    })

};

//修改菜品
const isSumbiting = ref(false)
const updateFoodInfo = () => {
    isSumbiting.value = true
    API.categoryInfo.update(foodInfoData.value).then(result => {
        ElNotification({
            type: "success",
            title: "提示",
            message: "修改菜品成功"
        })

        router.replace({ name: "CategoryInfoList" })
    }).catch((error) => {
        ElNotification({
            type: "danger",
            title: "失败了",
            message: "修改菜品失败，请重试或联系管理员"
        })
        console.log(error);
    }).finally(() => {
        isSumbiting.value = false
    })

}


//重置表单

const resetForm = () => {
    // console.log(formEl);
    formEl.value.resetFields();
}

</script>
<style lang="scss" scoped>
:deep(.el-upload) {
    @apply w-full h-full overflow-hidden;
}
</style>